<template>
  <div class="aurora-bg">
    <canvas ref="canvasRef"></canvas>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const canvasRef = ref(null)
let animationId = null

onMounted(() => {
  const canvas = canvasRef.value
  const ctx = canvas.getContext('2d')
  
  canvas.width = window.innerWidth
  canvas.height = window.innerHeight

  let time = 0

  const drawAurora = () => {
    ctx.fillStyle = 'rgba(5, 10, 30, 0.05)'
    ctx.fillRect(0, 0, canvas.width, canvas.height)

    // 绘制极光波浪
    for (let i = 0; i < 3; i++) {
      ctx.beginPath()
      
      const hue = (time * 0.5 + i * 30) % 360
      const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height)
      gradient.addColorStop(0, `hsla(${hue}, 80%, 60%, 0.3)`)
      gradient.addColorStop(0.5, `hsla(${hue + 30}, 80%, 60%, 0.2)`)
      gradient.addColorStop(1, 'rgba(0, 0, 0, 0)')
      
      ctx.fillStyle = gradient

      for (let x = 0; x <= canvas.width; x += 10) {
        const y = canvas.height * 0.3 + 
                  Math.sin((x * 0.002) + (time * 0.01) + i) * 100 +
                  Math.sin((x * 0.001) + (time * 0.02) + i) * 50
        
        if (x === 0) {
          ctx.moveTo(x, y)
        } else {
          ctx.lineTo(x, y)
        }
      }
      
      ctx.lineTo(canvas.width, canvas.height)
      ctx.lineTo(0, canvas.height)
      ctx.closePath()
      ctx.fill()
    }

    // 绘制星星
    if (time % 3 === 0) {
      for (let i = 0; i < 3; i++) {
        const x = Math.random() * canvas.width
        const y = Math.random() * canvas.height * 0.5
        const size = Math.random() * 2
        
        ctx.fillStyle = 'rgba(255, 255, 255, 0.8)'
        ctx.beginPath()
        ctx.arc(x, y, size, 0, Math.PI * 2)
        ctx.fill()
      }
    }

    time++
    animationId = requestAnimationFrame(drawAurora)
  }

  drawAurora()

  const handleResize = () => {
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
  }

  window.addEventListener('resize', handleResize)

  onUnmounted(() => {
    window.removeEventListener('resize', handleResize)
    if (animationId) {
      cancelAnimationFrame(animationId)
    }
  })
})
</script>

<style scoped>
.aurora-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(to bottom, #050a1e 0%, #0a1e3e 50%, #1a2e4e 100%);
}

canvas {
  display: block;
}
</style>

